<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { usePlayerStore } from '@/stores/player'
import { useUserStore } from '@/stores/user'
import { getRecentMusic } from '@/api/music'
import type { Music } from '@/stores/player'
import { formatTime } from '@/utils/usertools'

const router = useRouter()
const playerStore = usePlayerStore()
const userStore = useUserStore()
const recentPlays = ref<Music[]>([])

onMounted(async () => {
  if (!userStore.isLoggedIn) {
    recentPlays.value = []
    return
  }

  try {
    const result = await getRecentMusic()
    recentPlays.value = result
  } catch (error) {
    console.error('获取最近播放列表失败:', error)
    recentPlays.value = []
  }
})

const playMusic = async (music: Music) => {
  try {
    await playerStore.playMusic(music)
    playerStore.isPlaying = true
    router.push({
      name: 'Detail',
      params: { id: music.id }
    })
  } catch (error) {
    console.error('播放音乐失败:', error)
  }
}
</script>

<template>
  <div class="recent-play-list">
    <div class="song-table">
      <div v-if="!userStore.isLoggedIn" class="empty-message">
        登录后查看播放记录
      </div>
      <div v-else-if="recentPlays.length === 0" class="empty-message">
        暂无播放记录
      </div>
      <div v-else
           class="song-item" 
           v-for="song in recentPlays" 
           :key="song.id"
           @click="playMusic(song)">
        <div class="song-cover">
          <img :src="song.cover" :alt="song.title">
          <div class="play-hover">
            <i class="play-icon">▶</i>
          </div>
        </div>
        <div class="song-info">
          <div class="song-name">{{ song.title }}</div>
          <div class="artist-name">{{ song.artist }}</div>
        </div>
        <div class="song-duration">{{ formatTime(Number(song.duration)) }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.recent-play-list {
  background: color-mix(in srgb, var(--bgc-color-2) 40%, transparent);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--primary-color) 5%, transparent);
  padding: 10px;

  .song-table {
    .song-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-radius: 10px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 4px;
      
      &:hover {
        background-color: color-mix(in srgb, var(--bgc-color-2) 60%, transparent);
        transform: translateX(5px);
        
        .play-hover {
          opacity: 1;
          transform: scale(1);
        }
      }
      
      .song-cover {
        position: relative;
        width: 55px;
        height: 55px;
        margin-right: 18px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px color-mix(in srgb, var(--bgc-color-1) 20%, transparent);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
        
        .play-hover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            color-mix(in srgb, var(--bgc-color-1) 20%, transparent),
            color-mix(in srgb, var(--bgc-color-1) 50%, transparent)
          );
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transform: scale(0.9);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          
          .play-icon {
            color: var(--primary-color);
            font-size: 28px;
            filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--bgc-color-1) 20%, transparent));
          }
        }
      }
      
      .song-info {
        flex: 1;
        
        .song-name {
          color: var(--primary-color);
          font-size: 15px;
          font-weight: 500;
          margin-bottom: 6px;
        }
        
        .artist-name {
          color: color-mix(in srgb, var(--secondary-color) 85%, transparent);
          font-size: 13px;
        }
      }
      
      .song-duration {
        color: color-mix(in srgb, var(--secondary-color) 75%, transparent);
        font-size: 13px;
        margin-left: 24px;
        font-weight: 500;
      }
    }
  }

  .empty-message {
    text-align: center;
    padding: 40px 20px;
    color: color-mix(in srgb, var(--secondary-color) 70%, transparent);
    font-size: 15px;
    font-weight: 500;
    
    &:hover {
      cursor: pointer;
      color: var(--primary-color);
    }
  }
}
</style>
